<template>
  <swiper :options="swiperOptions">
    <swiper-slide v-for="(item, index) in banner" :key="index">
      <img :src="item" alt="" />
    </swiper-slide>
    <!-- 轮播点 -->
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
export default {
  name: "Myswiper",
  data() {
    return {
      swiperOptions: {
        loop: true,
        pagination: {
          el: ".swiper-pagination",
        },
        autoplay: {
          disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay
          delay: 2000, // 自动切换的时间间隔（单位ms）
        },
      },
      banner: [
        require("../../../assets/bannerImg/f.jpg"),
        require("../../../assets/bannerImg/chest.jpg"),
        require("../../../assets/bannerImg/gg.jpg")
      ],
    };
  },
};
</script>

<style scoped>
img {
  width: 100%;
  height: 4.5rem;
}
</style>